<template>
  <div class="personalPag">
    <div class="personalAuto clearfix">
      <div class="personalLeft front-color">
        <div class="pageTitle">
          <span>{{$t('myAdd.personal.personal')}}</span>
        </div>
        <!--  个人信息 -->
        <router-link tag="div" :to="{path: '/personal/information'}" class="pointer" :class="{select: fullPath === '/personal/information' || fullPath === '/personal/infoAttestation'}">
          <span class="iconSpan"><i class="icon--default1"></i></span>
          <span class="textSpan">{{$t('myAdd.personal.personalInfo')}}</span>
        </router-link>
        <!-- 安全中心 -->
        <router-link tag="div" class="pointer" :to="{path: '/personal/securityCenter'}" :class="{select: fullPath === '/personal/securityCenter' || fullPath === '/personal/bindMobile' || fullPath === '/personal/googlebind' || fullPath === '/personal/bindEmail' || fullPath === '/personal/googleBind' || fullPath === '/personal/closeMobileVerify' || fullPath === '/personal/revisePassword' || fullPath === '/personal/setExPassW'}">
          <span class="iconSpan"><i class="icon-safe-default"></i></span>
          <span class="textSpan">{{$t('myAdd.personal.securityCenter')}}</span>
        </router-link>
        <!-- 收付款  -->
        <router-link tag="div" class="pointer" :to="{path: '/personal/payMethod'}" :class="{select: fullPath === '/personal/payMethod'}">
          <span class="iconSpan"><i class="icon--white"></i></span>
          <span class="textSpan">{{$t('myAdd.personal.payMethod')}}</span>
        </router-link>
        <!-- 邀请返佣  -->
        <router-link tag="div" class="pointer" :to="{path: '/personal/invitation'}" :class="{select: fullPath === '/personal/invitation' || routeBool}">
          <span class="iconSpan"><i class="icon--default1"></i></span>
          <span class="textSpan">{{$t('myAdd.personal.inviteGoodFriend')}}</span>
        </router-link>
        <!-- myApi -->
        <router-link tag="div" class="pointer" :to="{path: '/personal/api'}" :class="{select: fullPath === '/personal/api'}">
          <span class="iconSpan"><i class="icon-api-default"></i></span>
          <span class="textSpan">{{$t('myAdd.personal.myApi')}}</span>
        </router-link>
        <!-- 消息中心 -->
        <router-link tag="div" class="pointer" :to="{path: '/personal/mesage'}" :class="{select: fullPath === '/personal/mesage'}">
          <span class="iconSpan msgSpan"><i class="icon-info"></i> <b v-if="no_read > 0"></b></span>
          <span class="textSpan">{{$t('myAdd.personal.msgcenter')}}</span>
        </router-link>
        <!-- 问题反馈 -->
        <router-link tag="div" class="pointer" :to="{path: '/personal/question'}" :class="{select: fullPath === '/personal/question' || fullPath === '/personal/detail'}">
          <span class="iconSpan"><i class="icon-questuin"></i></span>
          <span class="textSpan">{{$t('myAdd.personal.question')}}</span>
        </router-link>
        <!-- 历史记录 -->
        <router-link tag="div" class="pointer" :to="{path: '/personal/hisRecord'}" :class="{select: fullPath === '/personal/hisRecord'}">
          <span class="iconSpan"><i class="icon--default2"></i></span>
          <span class="textSpan">{{$t('myAdd.personal.hisRecord')}}</span>
        </router-link>
      </div>
      <div class="personalRight">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'personal',
    data () {
      return {
        tab: null,
        no_read: '',
        routeBool: false
      }
    },
    mounted () {
      this.route(this.$route.fullPath)
      this.getRead()
    },
    computed: {
      fullPath () {
        return this.$route.fullPath
      }
    },
    watch: {
      '$route.fullPath' (val) {
        this.route(val)
      },
      '$store.state.mesage.mesg' (val) {
        this.getRead()
      }
    },
    methods: {
      getRead () {
        this.axios({
          url: this.$store.state.url.mesage.message_count,
          headers: {},
          params: {},
          method: 'post'
        }).then((data) => {
          if (data.code === '0') {
            this.no_read = data.data.noReadMsgCount
          }
        })
      },
      // 路由匹配判断
      route (val) {
        this.routeBool = false
        let route = val.split('?')[0]
        switch (route) {
          case '/personal/inviteFriends':
            this.routeBool = true
            break
          case '/personal/inviteReward':
            this.routeBool = true
            break
          case '/personal/inviteCommission':
            this.routeBool = true
            break
        }
      }
    }
  }
</script>
